﻿@{
    var currentCourseUsers = ViewBag.CurrentCourseUsers;
}

@* autocomplete block *@
<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/jquery.atwho.css")" />
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.caret.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.atwho.js")"></script>
@* autocomplete block end *@

<script type="text/javascript">
    /*START Autocomplete block*/
    //TODO: need to re-build the url/<a/> tags for @@name and #hashtag.
    var userNames = []
    var userIds = [];

    //we need to get hashtags from the hashtag table and populate it like names are populated.
    //we also need to add hashtags to the table if there are no matches so others will see hashtags they've seen already.
    var hashtags = [];
    @{
        if (null != ViewBag.HashTags)
        {
            foreach(string hashTag in ViewBag.HashTags)
        {
            @:hashtags.push("@hashTag");
        }
    }
    if (null != currentCourseUsers)
    {
        foreach (var userProfile in currentCourseUsers)
        {
            @:userNames.push("@userProfile.FirstName" + "@userProfile.LastName");
            @:userIds.push("@userProfile.ID");
        }
    }
    }

    localStorage['UserNames'] = userNames;
    localStorage['UserIds'] = userIds;

    $(document).on("focus", "textarea", function () {
        $(this).atwho({
            at: "@@",
            data: userNames,
            insertTpl: "@@${name}", //insert template i.e. what is inserted into the textarea
        });

        $(this).atwho({
            at: "#",
            data: hashtags
        });
    });
</script>
